<template>
    <el-container>
        <el-main>
            <Menu :data="data"></Menu>
            <Work :data="data" :svg="svg" :canvas="canvas" :control="control"></Work>
        </el-main><!--
        <el-aside width="500px">
            <Info :data="data"></Info>
        </el-aside>-->
    </el-container>
</template>
<script>
    import { watch } from 'vue'
    import Work from "./work";  
    import Menu from "./menu";  
    import Info from "./info"; 
    export default {
        name:'Editor',
        props: {
            data: {
              type: Array,
              default: []
            },
            svg: {
              type: String,
              default: ""
            },
            view: {
              type: Object,
              default: {
                width:"",
                height:"",
                offsetx:"",
                offsety:"",
              }
            }
        },
        components:{
            Work,
            Menu,
            Info
        },
        data() {
            return {
                control:"",
                selectID: [],
                options :[],
                canvas: {
                    lineX: 0,
                    lineY: 0,
                    dropX: 0,
                    dropY: 0,
                    offsetx: 0,
                    offsety: 0,
                    width: 0,
                    height: 0,
                    docwidth: "100%",
                    docheight: "100%",
                    zoom: 1,
                    showLine: true,
                    showDrag: false,
                    showScale: true,
                    backsetup: 'auto',
                    background: "#000000",
                },
                tableData:[]
            }
        },
        methods:{
            handleTabChage(e){
            },
            handleEdit(row, column, event) {
                row["selected"]=!row["selected"]
                this.selectID = []
                if (row.length > 0) {
                    row.forEach((value, index) => {
                    this.selectID.push(value.id)
                    })
                }
            },
            handleEdit1(row) {
                let that=this
                row["sn"]="00000000000"
                row["index"].forEach(function(items,index1,arr){
                    that.data[items[0]]["data"][items[1]]["sn"]="00000000000"
                })
            },
            handleRow({ row, rowIndex }) {
                let color = ''
                if(row["selected"]){
                    color = 'success-row'
                }else{
                    color = ''
                }
                return color
            },
            handleClick(val){
                if (val=="zoomin"){
                    this.canvas.zoom=this.canvas.zoom+0.1
                }
            }
        },
        created() {

        },
        mounted(){
            // 重置画布标尺刻度
            watch(() => [this.view.width, this.view.height, this.view.offsetx, this.view.offsety], (n1, n2) => {
                setTimeout(() => {
                    this.canvas.width=n1[0]
                    this.canvas.height=n1[1]
                    this.canvas.offsetx=n1[2]
                    this.canvas.offsety=n1[3]
                }, 300);
            }, { immediate: true });
        }
    }
</script>
<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-error) 
}
.el-table tbody tr.success-row:hover>td {
    --el-table-tr-bg-color: var(--el-color-error) !important;
}
.el-table--enable-row-hover .el-table__body tr.success-row:hover > td {
   background-color: var(--el-color-error) !important;
}
.mu-svg-editor {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: radial-gradient(#0229a0 -150%, rgb(30, 30, 30) 100%);
    overflow: hidden;
    box-sizing: border-box;
    display: grid;
    grid-gap: 0;
    grid-template-rows: 50px calc(100vh - 80px) 30px;
    grid-template-columns: 180px 1fr 260px;
    grid-template-areas: "menu menu menu" "tool work attr" "tool info info";
}
</style>